<template>
  <div id="userRegisterView">
    <h2>注册</h2>
  <a-form
  ref="formRef"
  :rules="rules"
  style="max-width: 480px; margin: 0 auto;"
   label-align="left"
    auto-label-width
     :model="form"
       @submit="handleSubmit"
       >
    <a-form-item 
    field="userAccount" 
     label="账号"
     validate-trigger="blur"
     >
      <a-input
        v-model="form.userAccount"
        placeholder="请输入要注册的用户名"
      />
    </a-form-item>
    <a-form-item field="userPassword" validate-trigger="blur" tooltip="密码不少于8位" label="密码">
      <a-input-password v-model="form.userPassword" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item field="checkPassword" validate-trigger="blur" tooltip="密码不少于8位" label="密码">
      <a-input-password v-model="form.checkPassword" placeholder="请再次输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" style="width: 120px;">注册</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import {UserControllerService,UserRegisterRequest} from "../../../generated"
import  message  from '@arco-design/web-vue/es/message';
import { useRouter } from 'vue-router';
    //表单信息
    const form = reactive({
      userAccount: '',
      userPassword: '',
      checkPassword:'',
    }as UserRegisterRequest);
    const router=useRouter();
    //提交表单
    const handleSubmit = async() => {
      const res=await UserControllerService.userRegisterUsingPost(form);
      if(res.code===0){
        //登录成功返回主页面
        message.success("注册成功"+JSON.stringify(form));
        router.push({
          path:'/user/login',
          replace:true,
        })
      }else{
        message.error("注册失败"+res.message);
      }
    };
    //表单校验规则
    const rules = {
      userAccount: [
        {
          required: true,
          message:'请填写用户名',
        },
      ],
      userPassword: [
        {
          required: true,
          message:'请填写密码',
        },
      ],
      checkPassword: [
        {
          required: true,
          message:'请填写密码',
        },
        {
          // eslint-disable-next-line
          validator: (value:string,cb: (error?: string) => void) => {
            if (value !== form.userPassword) {
              cb('两次密码不一致')
            } else {
              cb()
            }
          }
        }
      ],
    }
</script>